<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>我的代金券</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/mycode.css?v=01" />
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<div class="head tool">
			<span class="active" status="0">可使用</span>
			<span status="1">已使用</span>
			<span status="2">已过期</span>
		</div>
		<div class="content" id="codeList">
			
		</div>
		<script src="layui/layui.js" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/utils.js?v=10"></script>
		<script>
			layui.use(['element', 'layer', 'jquery'], function () {
				var layer = layui.layer,
					element = layui.element,
				    $ = layui.jquery;
				var code = getQueryVariable('code');
				var openid = utils.getOpenid(code);
				layer.ready(function(){
					//加载未使用优惠券
					$.ajax({
						url:"http://redmany.city1000.cn/red/my/quan",
						type: "post",
						data:{openid:openid,state:0},
						beforeSend:function(){
							//弹出的lodinng层
						    layer.load(2,{
						        shade:[0.5,"#333"]
						    });            
						},
						success: function(res) {
							//alert(JSON.stringify(res));
							if(res.code===200) {
								$('#codeList').html('');
								if(res.data.length > 0){
									res.data.forEach(item=>{
										var li = '';
										if(item.status > 0){
											li += '<div class="code_box s1">';
										}else{
											li += '<div class="code_box">';
										}
										li += '<div class="l">';
										li += '<span class="top">'+item.sdName+'</span>';
										li += '<span class="centre">'+item.name+'</span>';
										li += '<span class="foot">有效期至：'+item.time+'</span>';		
										li += '</div>';	
										li += '<div class="r">';
										if(item.state == 0){
											li += '<span class="money" onclick="used('+item.id+')">去使用</span>';
											li += '<i class="status_icon3"></i>';
										}else if(item.state == 1){
											li += '<span class="money">已使用</span>';
										}else{
											li += '<span class="money">已过期</span>';
										}
										li += '</div>';	
										li += '</div>';	
										$('#codeList').append(li);
									})
								}else{
									layer.msg("暂无数据！");
								}
							}else{
								layer.msg(res.msg);
							}
						},
						error:function() { 
							layer.msg("请求失败！");
						},
						complete:function(){
							//关掉loading
							layer.closeAll("loading")
						}
					});
				});
				$(".tool span").each(function(index) {
				    $(this).click(function(e) {
						if(!$(this).hasClass("active")){
							$(this).addClass("active").siblings().removeClass("active");
							var status = $(this).attr('status');
							//$(".detail").eq(index).show().siblings(".detail").hide();
							//加载数据
							$.ajax({
								url:"http://redmany.city1000.cn/red/my/quan",
								type: "post",
								data:{openid:openid,state:status},
								beforeSend:function(){
									//弹出的lodinng层
								    layer.load(2,{
								        shade:[0.5,"#333"]
								    });            
								},
								success: function(res) {
									//alert(JSON.stringify(res));
									if(res.code===200) {
										$('#codeList').html('');
										if(res.data.length > 0){
											res.data.forEach(item=>{
												var li = '';
												if(item.status > 0){
													li += '<div class="code_box s1">';
												}else{
													li += '<div class="code_box">';
												}
												li += '<div class="l">';
												li += '<span class="top">'+item.sdName+'</span>';
												li += '<span class="centre">'+item.name+'</span>';
												li += '<span class="foot">有效期至：'+item.time+'</span>';		
												li += '</div>';	
												li += '<div class="r">';
												if(item.state == 0){
													li += '<span class="money" onclick="used(\''+item.id+'\')">去使用</span>';
													li += '<i class="status_icon3"></i>';
												}else if(item.state == 1){
													li += '<span class="money">已使用</span>';
												}else{
													li += '<span class="money">已过期</span>';
												}
												li += '</div>';	
												li += '</div>';	
												$('#codeList').append(li);
											})
										}else{
											layer.msg("暂无数据！");
										}
									}else{
										$('#codeList').html('');
										layer.msg(res.msg);
									}
								},
								error:function() { 
									layer.msg("请求失败！");
								},
								complete:function(){
									//关掉loading
									layer.closeAll("loading")
								}
							});
						}
				    })    
				});
			});
			// 获取参数
			function getQueryVariable(variable) {
			    // 参数 window.location.search
			    var query = decodeURI(window.location.search.substring(1));
			    var vars = query.split("&");
			    for (var i = 0; i < vars.length; i++) {
			        var pair = vars[i].split("=");
			        if (pair[0] == variable) {
			            return pair[1];
			        }
			    }
			    return (false);
			}
			//使用
			function used(id){
				window.location.href = 'http://redmany.city1000.cn/red/zhuanfa/http:--hesuan.city1000.cn-daijinquan-used.html/'+id;
			}
		</script>
	</body>
</html>
